<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
<a href="./user.html" target="_self">用户中心1</a>
<a href="./user.html" target="_blank">用户中心2</a>

<button class="btn1">用户中心</button>
<button class="btn2">关闭窗口</button>
<button class="btn3">停止计时器</button>

<script>
// window是整个窗口中的全局对象
// BOM的核心对象：window
// window = {
//     alert: function (){},
//     prompt: function (){},
//     confirm: function (){},
//     name: '',
//     open: function (){},
//     close: function (){},
//     setTimeout: function (){},
//     setInterval: function (){},
//     clearTimeout: function (){},
//     clearInterval: function (){},
//     history: {},
//     location: {},
//     navigator: {},
//     screen: {},
//     document: #document,
//     ...
// }

// alert()警告弹窗，点击确定后关闭弹窗
// alert('hello');

// prompt()输入弹框，有确定和取消两个按钮
// 点击 确定 返回输入框中的值
// 点击 取消 返回null
// var res = prompt('海静喜欢什么颜色？');
// console.log( res );

// confirm()确认弹框，有确定和取消两个按钮
// 点击 确定 返回true
// 点击 取消 返回false
// var res = confirm('您确定要离开吗？');
// console.log( res );

// name属性的值只能是字符串，如果不是字符串自动转成字符串
// var name = 110;
// console.log( name + 120 );// '110120'

// open()打开一个页面，返回一个新的窗口
var btn1 = document.querySelector('.btn1');
var btn2 = document.querySelector('.btn2');
btn1.onclick = function (){
    // open('./user.html');// 默认在新窗口打开页面
    // open('./user.html','_blank');// 默认在新窗口打开页面
    // open('./user.html','_self');// 在当前窗口打开页面
    open('./user.html','_blank','width=400,height=200,left=200,top=100');// 在新窗口打开页面，并设置窗口大小位置
}

btn2.onclick = function (){
    // 关闭窗口（只能关闭程序打开的新窗口，不能关闭用户打开的当前窗口）
    close();
}

// 计时器：
// setInterval(fn,time,param)表示每隔time的时间，执行一次fn函数（重复执行），返回计时器编号
// fn 要计时的函数
// time 计时的时间，单位是毫秒 1秒=1000毫秒
// param 是传给fn的实参
// var num = setInterval(function (){
//     console.log( '计时器的回调函数。。。1' );
// },2000);

// console.log( num );// 1 计时器编号或计时器id

// 给计时器回调传参
// a和b是形参，2和4是实参
// setInterval(function (a,b){
//     console.log( 'a+b=' + (a+b) );
// },2000,2,4);


// setTimeout(fn,time,param)经过time时间后，执行一次fn函数（只执行一次），返回计时器编号
// fn 要计时的函数
// time 计时的时间，单位是毫秒 1秒=1000毫秒
// param 是传给fn的实参
// var num2 = setTimeout(function (){
//     console.log( '计时器的回调函数。。。2' );
// },3000);
// console.log( num2 );// 1 计时器编号或计时器id

// 注意：计时器给要计时的函数计时，到达计时时间之后，函数不一定立即执行，取决于此时同步是否执行完成

var btn3 = document.querySelector('.btn3');
btn3.onclick = function (){
    // 清除计时器，传入计时id
    // clearInterval(num);
    clearTimeout(num2);
}


// JS中的各种程序分为：同步程序和异步程序
// 异步程序: setInterval setTimeout 事件处理函数 。。。
// 同步程序: 除了上面异步程序，其他都是同步程序

// 同步程序：按照书写顺序依次执行
// console.log( '程序1' );
// console.log( '程序2' );
// console.log( '程序3' );

// 异步程序：不按书写顺序执行（先执行完同步程序，再执行异步程序）
setTimeout(function (){// 异步
    console.log( '程序1' );
},20);
console.log( '程序2' );// 同步
console.log( '程序3' );// 同步
setTimeout(function (){// 异步
    console.log( '程序4' );
},10);

</script>
</body>
</html>